Navigation now works for detail pages.

Main issues solved:

1. Don't call $.mobile.navigate, use $.mobile.changePage while it's not depreciated
2. On your click listeners, like this:

$(document).on('click', '.task-detail-link', function () {
    page_parameter_box = {task_id: $(this).data('jio-id')};
    $.mobile.changePage("#task-detail-page");   // used to be $.mobile.navigate
  });

you trigger a transition. You trigger the same transition in parsePage, the "sort-of-router". So you trigger the same transition two times creating 2 entries in JQM/browser history. Lot of fun on back-clicks...
NOTE: I only removed the double transition in the above snippet. All others you need to replace.
3. Can't use ?id=.... parameters with JQM (will work but be chopped off). I have switched to url-encoded / so your links are correct = #task-detail-page/123456 but the URL loaded will be #task-detail-page%2123456. Only way possible as I see it, if you want to have bookmark-able links.
4. As all your pages exist in a "default" state, I'm doing the following:

• changePage to #task-detail-page%2123456
• page not found in DOM (only default #task-detail-page) exists
• inside handle update default data-url to where we want to go = change from #task-detail-page to #task-detail-page%2123456 and trigger same transition again
• this time around the page exists, so JQM finishes the transition
• on pagehide we must reset the data-url. As data-url/id are the same, I'm just resetting data-url to id.